<template>
    <el-dialog v-if="dialogVisible" :append-to-body="true" :close-on-click-modal='false' title="添加规则组触发规则" :visible.sync="dialogVisible" top="5vh" @close="resetForm('addRuleGroupForm')" width="1200px">
        <div class="over_box">
            <el-form label-position='left' label-width="90px" size="small" :model="addRuleGroupForm" :hide-required-asterisk='true' ref="addRuleGroupForm" :rules="addRuleGroupRules" class="add_form">
                <el-form-item label="规则组" prop="group_name">
                    <div class="flexbox flexcenter">
                        <div class="flexbox flexcenter rules-item" v-for="(item,index) in rulesList" :key="index">
                            {{item.group_name}}
                            <el-popover placement="bottom" width="400" trigger="hover">
                                <div class="rules_list_box">
                                    <div class="rules_text" v-for="(text,index2) in item.operation" :key="index2">
                                        <template v-if="text.operation_type==0">
                                            {{index2+1}}.如果满足计划总消耗在<span class="blue_tips">{{item.condition[text.condition].cost_left}}-{{item.condition[text.condition].cost_right}}</span>，计划总roi在<span class="blue_tips">{{item.condition[text.condition].roi_left}}-{{item.condition[text.condition].roi_right}}</span>之间，且10分钟计划消耗在<span class="blue_tips">{{text.speed_left}}-{{text.speed_right}}</span>，10分钟计划roi在<span class="blue_tips">{{text.roi_left}} -{{text.roi_right}}</span>之间，则触发<span class="blue_tips">关停</span>操作
                                        </template>
                                        <template v-else-if="text.operation_type==1">
                                            {{index2+1}}.如果满足计划总消耗在<span class="blue_tips">{{item.condition[text.condition].cost_left}}-{{item.condition[text.condition].cost_right}}</span>，计划总roi在 <span class="blue_tips">{{item.condition[text.condition].roi_left}}-{{item.condition[text.condition].roi_right}}</span> 之间，且消耗到达预算设置<span class="blue_tips">{{text.trigger_float}}%</span>，则触发<span class="blue_tips">调预算</span>操作，每次<span class="blue_tips">上调￥{{text.trigger}}</span>
                                        </template>
                                        <template v-else-if="text.operation_type==2">
                                            {{index2+1}}.如果满足计划总消耗在 <span class="blue_tips">{{item.condition[text.condition].cost_left}}-{{item.condition[text.condition].cost_right}} </span>之间 ，计划总roi在<span class="blue_tips">{{item.condition[text.condition].roi_left}}-{{item.condition[text.condition].roi_right}}</span>之间，需要维持10分钟消耗（流速）在 <span class="blue_tips">{{text.speed_left}}-{{text.speed_right}}</span>之间。则当10分钟消耗（流速）小于 <span class="blue_tips">{{text.speed_left}}</span> 时触发改出价操作出价<span class="blue_tips">上调 {{text.percentage}}%</span>，反之当10分钟消耗（流速）大于 <span class="blue_tips">{{text.speed_right}}</span> 时触发改出价操作出价<span class="blue_tips">下调 {{text.percentage}}%</span>。两次改出价操作时间间隔为 <span class="blue_tips">{{text.after_time}}分钟</span>，出价范围在<span class="blue_tips">{{text.price_left}}-{{text.price_right}}</span> 之间
                                        </template>
                                    </div>
                                </div>
                                <img src="../../assets/img/help_icon.svg" alt="" slot="reference">
                            </el-popover>

                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="触发设置">
                    <div class="rule_box">
                        <div class="flexbox flexcenter" style="margin-bottom:10px">
                            <span class="rule_titles">设置固定条件</span>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:10px;margin-right:5px">
                                <path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#D1D2D6" stroke-width="1.6" stroke-linejoin="round" />
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#D1D2D6" />
                                <path d="M10.1876 13.7501V8.50006H9.81262H9.43762" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8.875 13.75H11.5" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <span style="color:red">注意：所有范围取值遵循左闭右开的原则。如 roi 范围 1 - 2 则代表 1 &lt;= roi &lt; 2</span>
                        </div>
                        <div class="cod_item flexbox flexcenter" v-for="(item,index) in addRuleGroupForm.condition" :key="index">
                            <div class="cod_tag">固定条件{{index+1}}</div>
                            <div class="cod_text font_14 color_01 ml_12">
                                <el-select v-model="item.roi_type" placeholder="请选择roi" class="str_select" >
                                    <el-option label="直接支付roi" value="0"></el-option>
                                    <el-option label="7日总支付roi" value="1"></el-option>
                                </el-select>
                                <!-- 广告主<span class="blue_tips">总roi</span> -->
                                范围：</div>
                            <el-form-item label="" :prop="`condition.${index}.roi_left`" :rules="addRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.roi_left" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12">-</span>
                            <el-form-item label="" :prop="`condition.${index}.roi_right`" :rules="addRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.roi_right" placeholder="请输入" @change="setSessionStorage" style="width:120px"></el-input>
                            </el-form-item>
                            <div class="icon_btn ml_12" v-if="addRuleGroupForm.condition.length>1"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletCondition(index)"></div>
                        </div>
                        <el-link type="primary" :underline="false" class="mt_5" @click="addCondition">添加条件</el-link>
                        <div class="divider_line"></div>
                        <span class="rule_titles">触发规则组</span>
                        <div class="condition_box" v-for="(item,index) in addRuleGroupForm.operation" :key="index">
                            <div class="condition_item flexbox flexcenter flexbetween">
                                <div class="flexbox flexcenter">
                                    <div class="cod_tag">触发条件</div>
                                    <div class="cod_text font_14 color_01 ml_12">固定条件</div>
                                    <el-form-item label="" :prop="`operation.${index}.condition`" class="ml_12" :rules="addRuleGroupRules.select">
                                        <el-select v-model="item.condition" placeholder="请选择" style="width:120px">
                                            <el-option :label="'固定条件'+(index2+1)" :value="index2" v-for="(item2,index2) in addRuleGroupForm.condition" :key="index2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12">消耗时段每10分钟</div>
                                </div>
                                <div class="icon_btn" v-if="addRuleGroupForm.operation.length>1"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletOperation(index)"></div>
                            </div>
                            <div class="condition_item noBline">
                                <div class="cod_tag inline_box">操作设置</div>
                                <div class="rules_chart">
                                    <img src="../../assets/img/rules_chart.svg" alt="">
                                    <el-form-item label="" :prop="`operation.${index}.group_left`" class="chart_selet1" size="mini">
                                        <el-select v-model="item.group_left" placeholder="请选择" style="width:120px">
                                            <el-option label="无触发操作" value=""></el-option>
                                            <el-option :label="item.group_name" :value="index" v-for="(item,index) in rulesList" :key="index"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="" :prop="`operation.${index}.group_middle`" class="chart_selet2" size="mini">
                                        <el-select v-model="item.group_middle" placeholder="请选择" style="width:120px">
                                            <el-option label="无触发操作" value=""></el-option>
                                            <el-option :label="item.group_name" :value="index" v-for="(item,index) in rulesList" :key="index"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="" :prop="`operation.${index}.group_right`" class="chart_selet3" size="mini">
                                        <el-select v-model="item.group_right" placeholder="请选择" style="width:120px">
                                            <el-option label="无触发操作" value=""></el-option>
                                            <el-option :label="item.group_name" :value="index" v-for="(item,index) in rulesList" :key="index"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="" :prop="`operation.${index}.speed_left`" :rules="addRuleGroupRules.group" class="chart_input1" size="mini">
                                        <el-input v-model="item.speed_left" placeholder="请输入" style="width:90px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="" :prop="`operation.${index}.speed_right`" :rules="addRuleGroupRules.group" class="chart_input2" size="mini">
                                        <el-input v-model="item.speed_right" placeholder="请输入" style="width:90px"></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="condition_tips">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#D1D2D6" stroke-width="1.6" stroke-linejoin="round" />
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#D1D2D6" />
                                    <path d="M10.1876 13.7501V8.50006H9.81262H9.43762" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M8.875 13.75H11.5" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                满足{{item.condition !==''?addRuleGroupForm.condition[item.condition].roi_type == '0'?'直接支付roi':'7日总支付roi':''}}在<span class="blue_tips"> {{item.condition!==''?addRuleGroupForm.condition[item.condition].roi_left:''}}-{{item.condition!==''?addRuleGroupForm.condition[item.condition].roi_right:''}} </span>之间，10分钟账户消耗<span class="blue_tips"> 0-{{item.speed_left}} </span>时触发规则组<span class="blue_tips">{{item.group_left!==''?rulesList[item.group_left].group_name:'无触发操作'}}</span>，10分钟账户消耗<span class="blue_tips"> {{item.speed_left}}-{{item.speed_right}} </span>时触发规则组<span class="blue_tips">{{item.group_middle!==''?rulesList[item.group_middle].group_name:'无触发操作'}}</span>，十分钟账户消耗<span class="blue_tips"> {{item.speed_right}} </span>以上时触发规则组<span class="blue_tips">{{item.group_right!==''?rulesList[item.group_right].group_name:'无触发操作'}}</span>
                            </div>
                        </div>
                        <el-link type="primary" :underline="false" @click="addOperation">添加操作</el-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('addRuleGroupForm')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('addRuleGroupForm')" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: ["rules"],
    name: "",
    data() {
        var maxValue = (rule, value, callback) => {
            if (Number(value) > 900000) {
                callback(new Error("数值不能超过900000"));
            }
            callback();
        };
        return {
            loading: false,
            dialogVisible: false,
            type: null,
            rulesList: [],
            addRuleGroupForm: {
                condition: [
                    {
                        roi_left: "",
                        roi_right: "",
                        roi_type:"0",
                    },
                ],
                operation: [
                    {
                        condition: 0,
                        speed_left: "",
                        speed_right: "",
                        group_left: "",
                        group_middle: "",
                        group_right: "",
                    },
                ],
            },

            addRuleGroupRules: {
                select: [
                    {
                        required: true,
                        message: "请选择",
                        trigger: ["blur", "change"],
                    },
                ],
                group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                    { validator: maxValue, trigger: ["blur", "change"] },
                ],
            },
        };
    },
    created() {},
    methods: {
        // 添加条件
        addCondition() {
            this.addRuleGroupForm.condition.push({
                roi_left: "",
                roi_right: "",
                roi_type:"0",
            });
        },

        // 删除条件
        deletCondition(index) {
            for (let i in this.addRuleGroupForm.operation) {
                if (
                    this.addRuleGroupForm.operation[i].condition == index ||
                    this.addRuleGroupForm.operation[i].condition > index
                ) {
                    this.addRuleGroupForm.operation[i].condition = "";
                }
            }
            this.addRuleGroupForm.condition.splice(index, 1);
        },

        // 添加操作
        addOperation() {
            this.addRuleGroupForm.operation.push({
                condition: 0,
                speed_left: "",
                speed_right: "",
                group_left: "",
                group_middle: "",
                group_right: "",
            });
        },

        // 删除操作
        deletOperation(index) {
            this.addRuleGroupForm.operation.splice(index, 1);
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.$emit("getTriggerData", this.addRuleGroupForm);
                    this.resetForm("addRuleGroupForm");
                } else {
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.dialogVisible = false;
            // this.$refs[formName].resetFields();
        },
    },
    components: {},
};
</script>


<style scoped>
/* /deep/ .el-form-item__label{
    padding:0 !important;
} */
.str_select /deep/ .el-input__inner{
    width: 108px !important;
    padding-left: 0 !important;
    border-color: #f8f9fb !important;
    padding-right: 0px !important;
    background: transparent !important;
}
.over_box {
    max-height: 670px;
}
.rule_box {
    max-height: 500px;
    overflow-y: auto;
}
.cod_text {
    line-height: 14px;
}
.rule_titles {
    font-size: 13px;
    color: #17233d;
    font-weight: bold;
}
.blue_tips {
    color: #4475ff;
}
.condition_box {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    background-color: #f8f9fb;
    margin-bottom: 15px;
}
.condition_item {
    padding: 12px 0;
    margin: 0 20px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
    z-index: 2;
}
.condition_item.noBline {
    border-bottom: 0;
}
.condition_tips {
    position: relative;
    font-size: 13px;
    line-height: 16px;
    color: #616c85;
    padding: 13px 20px 13px 45px;
    background-color: #fff;
}
.condition_tips svg {
    position: absolute;
    left: 20px;
    top: 10px;
}
.rules_list_box {
    max-height: 250px;
    overflow-y: auto;
}
.rules_text {
    padding: 5px 0;
}
.rules-item {
    height: 28px;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
    padding: 0 10px;
    margin-right: 16px;
}
.rules-item span {
    height: 28px;
}
.rules-item img {
    margin-left: 5px;
    margin-top: 5px;
}
.rules_chart {
    position: relative;
    margin-top: 10px;
}
.inline_box {
    display: inline-block;
}
.chart_selet1 {
    position: absolute;
    top: 0;
    left: 185px;
}
.chart_selet2 {
    position: absolute;
    top: 0;
    left: 430px;
}
.chart_selet3 {
    position: absolute;
    top: 0;
    left: 660px;
}
.chart_input1 {
    position: absolute;
    top: 100px;
    left: 320px;
}
.chart_input2{
    position: absolute;
    top: 100px;
    left: 565px;
}
</style>
